<template>
  <el-dialog :visible.sync="dialogVisible" title="上传签收单模板"  :close-on-click-modal="false">
    <el-form label-width="90px">
      <el-row>
        <el-col>
          <el-form-item label="上传模板:">
              <el-upload list-type="picture-card" ref="upload" :file-list="upconfig.imgList" :action="upconfig.action"
                :headers="upconfig.headers" :accept="upconfig.accept" :limit="upconfig.limit" :on-change="handleChange"
                :auto-upload="false" :on-remove="handleRemove" :on-exceed="handleLimit" multiple :on-preview="handlePreview">
                <i class="el-icon-plus"></i>
              </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
          <el-col>
            <el-form-item label="" >
              1.上传文件格式必须为图片或PDF格式。
              <br/>
              2. 上传附件大小不能超过5M。
              <br/>
              3. 最多可上传{{upconfig.limit}}个附件。
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>
     <attachviewer v-if="attachVisible" ref="attachViewerUI"></attachviewer>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave">上传并保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import attachviewer from '@/components/attachviewer.vue';
  import axios from 'axios';
  export default{
    components:{
      attachviewer
    },
    data(){
      return{
         index:-1,
         formData:{
           gwsid:''
         },
         attachVisible:false,
        dialogVisible:false,
        //文件上传相关变量
        upconfig: {
          //文件上传相关参数
          accept: '.jpg,.jpeg,.png,.pdf,.docx,.doc',
          limit: 2,
          headers: {
            token: localStorage.getItem('token') != null ? localStorage.getItem('token') : ''
          },
          imgList: [],
          fileList: [],
          rids: [], //要删除的id
          action:""
        },
      }
    },
    methods:{
      init(index,data){
         this.index=index;
         this.formData=data;
         this.upconfig.imgList=[];
         this.upconfig.imgList=data.deliver_sign_template;
         this.upconfig.fileList=[];
      },
      /***********************文件上传区域开始****************/
      //文件数量超限提示
      handleLimit: function() {
        this.$message.warning("最多可上传" + this.upconfig.limit + "个文件");
      },
      handleChange: function(file, list) {
        //判断文件格式和数量
        var ext = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
        var extarr = ['jpg', 'jpeg', 'png',"pdf","docx","doc"];
        var sizeok = file.size / 1024 / 1024 < 5;
        if (extarr.lastIndexOf(ext) == -1) {
          this.$message.error("上传文件格式必须为" + extarr.join(","));
          //删除刚上传的文件
          this.upconfig.fileList.splice(this.upconfig.fileList.length - 1, 1);
          return;
        }
        if (!sizeok) {
          this.$message.error("上传文件大小最大不超过5M");
          this.upconfig.fileList.splice(this.upconfig.fileList.length - 1, 1);
          return;
        }

        this.upconfig.fileList = list;
      },
      // 文件列表移除文件时的钩子
      handleRemove: function(file, fileList) {
        console.log(file);
        if (file.id) { //如果存储 id即为已经上传好的图片
          console.log('删除了已经上传好的图片');
          this.upconfig.rids.push(file.id);
        }
        this.upconfig.fileList = fileList;
      },
      // 点击文件列表中已上传的文件时的钩子
      handlePreview(file) {
          console.log(this.upconfig.imgList);
          this.attachVisible=true;
          this.$nextTick(()=>{
            this.$refs.attachViewerUI.dialogVisible=true;
            this.$refs.attachViewerUI.initData(this.upconfig.imgList);
          })
          console.log(file);
      },
      handleSave: function() {
         let fd = new FormData();
         fd.append("ordercode",this.formData.ordercode);
         fd.append("ouid", this.formData.ouid);
         //添加要删除的附件id
         fd.append("rids", this.upconfig.rids.join(","));
         let fid = 0;
         this.upconfig.fileList.forEach(file => {
           if (file.raw) {
             fd.append("file" + fid, file.raw);
             fid++;
           }
         });

         this.$axiosUploader.post("api/admin/order/upload_signdoc",fd).then(res=>{
             if(res.status==200 && res.data.code==0){
                 this.upconfig.imgList=res.data.attachlist;
                 this.$message.success({message:"签收单模板保存成功!",duration:1500,showClose:true});
                 this.dialogVisible=false;
                 this.$emit("closeHandler",this.index,res.data.attachlist);
             }
          });
      }
    }
  }
</script>

<style>
</style>
